/* pages/pages-list/group-details/group-details.wxss */
.page {
  min-height: 100vh;
  background-image: linear-gradient(180.4deg, #04947b 0%, #032c24 100%);
  overflow: hidden;

  .page-top {
    text-align: center;

    .code {
      width: 450rpx;
      height: 450rpx;
      border-radius: 24rpx;
      padding: 10rpx;
      box-shadow: 0px 4rpx 16rpx #2e56611f;
      background-color: #ffffff80;
      // background-color: #ffffff;
      margin-top: 50rpx;

    }

    .details {
      width: 690rpx;
      min-height: 800rpx;
      padding: 0 0 72rpx 0;
      background-color: #f5fbfd;
      border-radius: 24rpx;
      margin: -100rpx auto 0 auto;
      overflow: hidden;

      .title {
        margin-top: 150rpx;
        color: #2e5661;
        font-size: 36rpx;
        font-weight: 700;
      }

      .time {
        color: #565656;
        font-size: 26rpx;
        margin-top: 26rpx;
      }

      .address {
        color: #565656;
        font-size: 26rpx;
        margin-top: 12rpx;
      }

      .ren {
        width: 500rpx;
        margin: 56rpx auto 0 auto;

        .ren-box {
          image {
            width: 110rpx;
            height: 110rpx;
            border-radius: 50%;
          }

          .name {
            color: #565656;
            font-size: 23rpx;
            margin-top: 10rpx;
          }
        }

      }
      .num{
        text-align: center;
        margin-top: 50rpx;
        color: #212121;
        font-size: 28rpx;
        text{
          color: #fa8e64;
          font-size: 28rpx;
        }
      }
      .rule {
        margin-top: 72rpx;
        image {
          width: 140rpx;
          height: 72rpx;
          margin-bottom: 26rpx;
        }
       
        .give {
          color: #565656;
          font-size: 26rpx;
          padding: 0 80rpx;
          text-align: left;
          line-height: 1.4;
          margin-bottom: 24rpx;
        }
      }
    }
  }

  .page-bot {
    width: 100%;
    padding: 34rpx 40rpx;
    background-color: #EEF8F4;
    border-radius: 36rpx 36rpx 0 0;
    margin-top: 40rpx;
    margin-bottom: 170rpx;

    .title {
      color: #2e5661;
      font-size: 36rpx;
      font-weight: 700;
      text-align: center;
      margin-bottom: 24rpx;
    }

    .give {
      color: #707c77;
      font-size: 26rpx;
      line-height: 1.4;
      margin-bottom: 22rpx;
    }
  }

  .fad {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 170rpx;
    background-color: #ffffff;

    .btn {
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
      border-radius: 48rpx;
    }

    .share {
      width: 320rpx;
      background-image: linear-gradient(95.5deg, #048a73 0%, #034236 100%);
      box-shadow: 4rpx 4rpx 16rpx #799a9440 , -6rpx -6rpx 20rpx #ffffff ;
      color: #ffffff;
      font-size: 32rpx;
    }
    .invite{
      width: 680rpx;
      background-image: linear-gradient(95.5deg, #048a73 0%, #034236 100%);
      box-shadow: 4rpx 4rpx 16rpx #799a9440 , -6rpx -6rpx 20rpx #ffffff ;
      color: #ffffff;
      font-size: 32rpx;
      margin-left: 30rpx
    }
    .invite2{
      width: 320rpx;
    }
  }
  // 弹框
  .playbill {
    text-align: center;
  
    .playbill-img {
      width: 554rpx;
      height: 984rpx;
      background-color: #fff;
    }
  
    .title {
      color: #ffffff;
      font-size: 28rpx;
      margin-top: 26rpx;
    }
  
    .download {
      width: 25rpx;
      height: 25rpx;
      margin-top: 26rpx;
      margin-left: 10rpx;
    }
  
    .close {
      width: 54rpx;
      height: 55rpx;
      margin-top: 30rpx;
    }
  }
  // 海报
  #myCanvas {
    width: 554px;
    height: 984px;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 100%;
  }
  // 二维码
.qrcode {
  width: 350px;
  height: 350px;
  opacity: 0;
  transform: translate(-100%);
  position: fixed;
  top: 0;
  left: 0;
}
}